package com.example.newproject_overseas.components
//底部弹出sheet组件


import android.text.Layout
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterialApi::class)
@Composable
fun BottomSheetContent(
    title:String = "Please choose",
    cancelText:String? = null,
    dataList: List<String>,
    onSelectData: (String) -> Unit,
    onCloseSheet: () -> Unit,
    state: ModalBottomSheetState,
) {
    val scope = rememberCoroutineScope()

    ModalBottomSheetLayout(
        sheetState = state,
        sheetContent = {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                Column(
                    modifier = Modifier
                        .padding(top = 10.dp, bottom = 21.dp)
                        .fillMaxWidth(),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text(
                        text = title,
                        fontSize = 20.sp,
                        color = Color(0xFFFFCC00)
                    )
                    DataList(dataList = dataList, onSelectData = { data ->
                        onSelectData(data)
                        scope.launch { onCloseSheet() }
                    })

                    if(cancelText != null){

                        Button(
                            onClick = {
                                scope.launch { onCloseSheet() }
                            },
                            modifier = Modifier
                                .align(Alignment.End)
                                .fillMaxWidth(),
                            colors = ButtonDefaults.buttonColors(Color(0xFFFFCC00))
                        ) {
                            Text(
                                text = cancelText,
                                fontSize = 25.sp,
                                color = Color.White,
                                fontWeight = FontWeight.Bold
                            )
                        }
                    }

                }
            }
        },
    ) {}
}


@Composable
fun DataList(dataList: List<String>, onSelectData: (String) -> Unit, modifier: Modifier = Modifier) {
    LazyColumn(modifier) {
        items(dataList) { data ->
            Surface(shape = RoundedCornerShape(5.dp)) {
                Column(
                    modifier = Modifier
                        .wrapContentHeight()
                        .fillMaxWidth()
                        .padding(top = 9.5.dp, bottom = 20.dp, start = 9.5.dp, end = 9.5.dp)
                        .background(color = Color(0xFFF1F1F1))
                        .clickable{
                            onSelectData(data)
                        },
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text(text = data, modifier = Modifier
                        .padding(top = 9.5.dp, bottom = 9.dp)
                        , color = Color(0xFF999999))
                }
            }
        }
    }
}

